<template>
  <div @click="handleStart" class="guide-container">
    <el-tooltip content="功能引导">
      <div><svg-icon icon="guide"></svg-icon></div>
    </el-tooltip>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'
import steps from './setps'
let driver = null
onMounted(() => {
  driver = new Driver({
    allowClose: false, // 禁止点击遮罩层关闭
    closeBtnText: '关闭', // 关闭按钮文字
    nextBtnText: '下一步', // 下一步按钮文字
    prevBtnText: '上一步' // 上一步按钮文字
  })
})
const handleStart = () => {
  driver.defineSteps(steps())
  driver.start()
}
</script>

<style lang="scss" scoped>
.guide-container {
  ::v-deep .svg-icon {
    font-size: 22px;
  }
}
</style>
